import { useState } from "react";
import {
  Table,
  Input,
  Select,
  Button,
  Space,
  Col,
  Pagination,
  Row,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import "./user.scss";

interface DataType {
  key: number;
  serialNumber: number;
  userAccount: string;
  userName: string;
  ChineseName: string;
  gender: string;
  phoneNumber: string;
  postName: string;
  department: string;
  role: string;
  sortOrder: number;
  status: string;
  remark?: string;
}

export default function User() {
  const [searchParams, setSearchParams] = useState<{
    userAccount?: string;
    userName?: string;
    postName?: string;
    status?: string;
  }>({});

  // 模拟用户数据 - 使用对象方式直接定义
  const mockUserData: DataType[] = [
    {
      key: 1,
      serialNumber: 1,
      userAccount: "JohnDoe",
      userName: "徐又菡",
      ChineseName: "徐又菡",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 1,
      status: "启用",
      remark: "",
    },
    {
      key: 2,
      serialNumber: 2,
      userAccount: "EmilySmith",
      userName: "萧文惠",
      ChineseName: "萧文惠",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 2,
      status: "停用",
      remark: "",
    },
    {
      key: 3,
      serialNumber: 3,
      userAccount: "MikeJohnson",
      userName: "苦侃楚",
      ChineseName: "苦侃楚",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 3,
      status: "启用",
      remark: "",
    },
    {
      key: 4,
      serialNumber: 4,
      userAccount: "SarahBrown",
      userName: "杜天蓝",
      ChineseName: "杜天蓝",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 4,
      status: "启用",
      remark: "",
    },
    {
      key: 5,
      serialNumber: 5,
      userAccount: "DavidDavis",
      userName: "艾如波",
      ChineseName: "艾如波",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 5,
      status: "启用",
      remark: "",
    },
    {
      key: 6,
      serialNumber: 6,
      userAccount: "LauraMiller",
      userName: "庞彦才",
      ChineseName: "庞彦才",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 6,
      status: "启用",
      remark: "",
    },
    {
      key: 7,
      serialNumber: 7,
      userAccount: "ChrisWilson",
      userName: "柴知亦",
      ChineseName: "柴知亦",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 7,
      status: "启用",
      remark: "",
    },
    {
      key: 8,
      serialNumber: 8,
      userAccount: "JessicaTaylor",
      userName: "谌瑞灵",
      ChineseName: "谌瑞灵",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 8,
      status: "启用",
      remark: "",
    },
    {
      key: 9,
      serialNumber: 9,
      userAccount: "MarkAnderson",
      userName: "滑恺恺",
      ChineseName: "滑恺恺",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 9,
      status: "启用",
      remark: "",
    },
    {
      key: 10,
      serialNumber: 10,
      userAccount: "LisaClark",
      userName: "可昭妍",
      ChineseName: "可昭妍",
      gender: "女",
      phoneNumber: "18204781224",
      postName: "项目经理",
      department: "项目部",
      role: "系统管理员，数据管理员，安全管理员",
      sortOrder: 10,
      status: "启用",
      remark: "",
    },
  ];

  const [data] = useState<DataType[]>(mockUserData);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // 计算分页数据
  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const handleSearch = () => {
    // 搜索逻辑
    console.log("Search params:", searchParams);
  };

  const handleReset = () => {
    setSearchParams({});
  };

  const handleCreate = () => {
    // 新建逻辑
  };

  const handleDelete = () => {
    // 删除逻辑
  };

  const handleEnable = () => {
    // 启用逻辑
  };

  const handleDisable = () => {
    // 停用逻辑
  };

  const handleEdit = (key: number) => {
    // 编辑逻辑
    console.log("Edit user:", key);
  };

  const handleDeleteUser = (key: number) => {
    // 删除单个用户逻辑
    console.log("Delete user:", key);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "serialNumber",
      key: "serialNumber",
      width: 80,
      fixed: "left",
    },
    {
      title: "用户账号",
      dataIndex: "userAccount",
      key: "userAccount",
      width: 120,
    },
    {
      title: "用户姓名",
      dataIndex: "ChineseName",
      key: "ChineseName",
      width: 120,
    },
    {
      title: "性别",
      dataIndex: "gender",
      key: "gender",
      width: 80,
    },
    {
      title: "手机号",
      dataIndex: "phoneNumber",
      key: "phoneNumber",
      width: 150,
    },
    {
      title: "岗位名称",
      dataIndex: "postName",
      key: "postName",
      width: 120,
    },
    {
      title: "所在部门",
      dataIndex: "department",
      key: "department",
      width: 100,
    },
    {
      title: "角色",
      dataIndex: "role",
      key: "role",
      width: 180,
      ellipsis: true,
    },
    {
      title: "排序",
      dataIndex: "sortOrder",
      key: "sortOrder",
      width: 80,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 80,
      render: (status) => {
        let color = "";
        if (status === "启用") {
          color = "#52c41a";
        } else if (status === "停用") {
          color = "#d9d9d9";
        }
        return <span style={{ color }}>{status}</span>;
      },
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      width: 150,
    },
    {
      title: "操作",
      key: "action",
      width: 120,
      fixed: "right",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record.key)}>编辑</a>
          <a onClick={() => handleDeleteUser(record.key)}>删除</a>
        </Space>
      ),
    },
  ];

  return (
    <div className="user-management">
      <div className="search-filter">
        <Row gutter={16} align="middle">
          <Col>
            <span>用户账户</span>
            <Input
              placeholder="请输入用户账户"
              style={{ width: 150, marginLeft: 8 }}
              value={searchParams.userAccount}
              onChange={(e) =>
                setSearchParams({
                  ...searchParams,
                  userAccount: e.target.value,
                })
              }
            />
          </Col>

          <Col>
            <span>用户姓名</span>
            <Input
              placeholder="请输入用户姓名"
              style={{ width: 150, marginLeft: 8 }}
              value={searchParams.userName}
              onChange={(e) =>
                setSearchParams({ ...searchParams, userName: e.target.value })
              }
            />
          </Col>
          <Col>
            <span>岗位名称</span>
            <Select
              placeholder="请选择"
              style={{ width: 150, marginLeft: 8 }}
              value={searchParams.postName}
              onChange={(value) =>
                setSearchParams({ ...searchParams, postName: value })
              }
              allowClear>
              <Select.Option value="项目经理">项目经理</Select.Option>
              <Select.Option value="行政助理">行政助理</Select.Option>
              <Select.Option value="人力资源专员">人力资源专员</Select.Option>
            </Select>
          </Col>
          <Col>
            <span>状态</span>
            <Select
              placeholder="请选择"
              style={{ width: 150, marginLeft: 8 }}
              value={searchParams.status}
              onChange={(value) =>
                setSearchParams({ ...searchParams, status: value })
              }
              allowClear>
              <Select.Option value="启用">启用</Select.Option>
              <Select.Option value="停用">停用</Select.Option>
            </Select>
          </Col>
          <Col>
            <Space>
              <Button onClick={handleReset}>重置</Button>
              <Button type="primary" onClick={handleSearch}>
                查询
              </Button>
            </Space>
          </Col>
        </Row>
      </div>

      <div className="action-buttons">
        <Button type="primary" onClick={handleCreate}>
          新建
        </Button>
        <Button onClick={handleDelete}>删除</Button>
        <Button onClick={handleEnable}>启用</Button>
        <Button onClick={handleDisable}>停用</Button>
      </div>
      <div className="user-table">
        <Table
          columns={columns}
          dataSource={paginatedData}
          pagination={false}
          rowKey="key"
          size="middle"
          scroll={{
            x: "max-content",
            y: 400, // 设置表格内容区域的高度，超出时显示垂直滚动条
          }}
          rowSelection={{
            onChange: (selectedRowKeys, selectedRows) => {
              console.log("Selected row keys:", selectedRowKeys);
              console.log("Selected rows:", selectedRows);
            },
          }}
        />
      </div>

      {/* 分页区域 */}
      <div className="pagination">
        <div className="total-count">总 {data.length} 条</div>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={data.length}
          onChange={(page, size) => {
            setCurrentPage(page);
            setPageSize(size);
          }}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总 ${total} 条`}
          pageSizeOptions={["2", "5", "8", "10"]}
        />
      </div>
    </div>
  );
}
